<!DOCTYPE html>
<html>
<head>

	<title>日志</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">

	<!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->

	<!-- Bootstrap Core CSS -->
	<link href="../css/bootstrap.min.css" rel="stylesheet">

	<!-- MetisMenu CSS -->
	<link href="../css/metisMenu.min.css" rel="stylesheet">

	<!-- DataTables CSS -->
	<link href="../css/dataTables.bootstrap.css" rel="stylesheet">

	<!-- Custom CSS -->
	<link href="../css/sb-admin-2.css" rel="stylesheet">

	<!-- Custom Fonts -->
	<link href="../css/font-awesome.min.css" rel="stylesheet"
		  type="text/css">
	<link href="../css/boot-crm.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
		var pageSize = 5;    //每页显示的记录条数
		var curPage=1;        //当前页
		var lastPage;        //最后页
		var direct=0;        //方向
		var len;            //总行数
		var page;            //总页数
		var begin;
		var end;

		$(document).ready(function display(){
			$.ajax({
				url:"../controller/log",
				type:"get",
				data:$("#form2").serialize(),
				datatype:"json",
				success : function(data){
					if(data===''){
						alert("获取日志数据失败");

					}else{
						alert("获取日志数据成功");
						var ob=eval("("+data+")");
						for (var i = 0; i < ob.length; i++) {
							var trHTML="<tr><td>"+ob[i].Vehicle_number+"</td><td>"+ob[i].entry_time+"</td><td>"+ob[i].leave_time+"</td><td>"+ob[i].time_quantum+"</td><td>"+ob[i].spend+
									"</td></tr>"
							//在table的最后一行添加遍历的值
							$("#table1").append(trHTML);

						}
						len =$("#table1 tr").length - 1;    // 求这个表的总行数，剔除第一行介绍
						page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize)+1;//根据记录条数，计算页数
						// alert("page==="+page);
						curPage=1;    // 设置当前为第一页
						displayPage(1);//显示第一页

						document.getElementById("btn0").innerHTML="当前 " + curPage + "/" + page + " 页    每页 ";    // 显示当前多少页
						document.getElementById("sjzl").innerHTML="数据总量 " + len + "";        // 显示数据量
						document.getElementById("pageSize").value = pageSize;



						$("#btn1").click(function firstPage(){    // 首页
							curPage=1;
							direct = 0;
							displayPage();
						});
						$("#btn2").click(function frontPage(){    // 上一页
							direct=-1;
							displayPage();
						});
						$("#btn3").click(function nextPage(){    // 下一页
							direct=1;
							displayPage();
						});
						$("#btn4").click(function lastPage(){    // 尾页
							curPage=page;
							direct = 0;
							displayPage();
						});
						$("#btn5").click(function changePage(){    // 转页
							curPage=document.getElementById("changePage").value * 1;
							if (!/^[1-9]\d*$/.test(curPage)) {
								alert("请输入正整数");
								return ;
							}
							if (curPage > page) {
								alert("超出数据页面");
								return ;
							}
							direct = 0;
							displayPage();
						});


						$("#pageSizeSet").click(function setPageSize(){    // 设置每页显示多少条记录
							pageSize = document.getElementById("pageSize").value;    //每页显示的记录条数
							if (!/^[1-9]\d*$/.test(pageSize)) {
								alert("请输入正整数");
								return ;
							}
							len =$("#table1 tr").length - 1;
							page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize)+1;//根据记录条数，计算页数
							curPage=1;        //当前页
							direct=0;        //方向
							firstPage();
						});

						function displayPage(){
							if(curPage <=1 && direct==-1){
								direct=0;
								alert("已经是第一页了");
								return;
							} else if (curPage >= page && direct==1) {
								direct=0;
								alert("已经是最后一页了");
								return ;
							}

							lastPage = curPage;

							// 修复当len=1时，curPage计算得0的bug
							if (len > pageSize) {
								curPage = ((curPage + direct + len) % len);
							} else {
								curPage = 1;
							}


							document.getElementById("btn0").innerHTML="当前 " + curPage + "/" + page + " 页    每页 ";        // 显示当前多少页

							begin=(curPage-1)*pageSize + 1;// 起始记录号
							end = begin + 1*pageSize - 1;    // 末尾记录号


							if(end > len ) end=len;
							$("#table1 tr").hide();    // 首先，设置这行为隐藏
							$("#table1 tr").each(function(i){    // 然后，通过条件判断决定本行是否恢复显示
								if((i>=begin && i<=end) || i==0 )//显示begin<=x<=end的记录
									$(this).show();
							});
						}
					}
				}
			})

		})
	</script>
</head>

<style type="text/css">
	.box {
		float: right;
	}

	.box1 {
		float: left;
	}

	.box2 {
		width: 900px;
		height: 400px;
		background: gray;
		margin: auto;
		opacity: 0.5;
		border-radius: 8px 8px 8px 8px;
	}

	.aa {
		margin-top: 80px;
	}

	.bb {
		margin-bottom: 30px;
	}

	h4 {
		font-size: 2em;
		margin: 0.87em 0;
	}

	td {
		text-align: center;
	}
</style>

<body>

<div id="wrapper">

	<!-- Navigation -->
	<nav class="navbar navbar-default navbar-static-top" role="navigation"
		 style="margin-bottom: 0">
		<div class="navbar-header">
			<h3>停车场管理系统</h3>
		</div>
		<!-- /.navbar-header -->

		<ul class="nav navbar-top-links navbar-right">


			<!-- /.dropdown -->
			<li class="dropdown"><a class="dropdown-toggle"
									data-toggle="dropdown" href="#"> <i class="fa fa-user fa-fw"></i>
				<i class="fa fa-caret-down"></i>
			</a>
				<ul class="dropdown-menu dropdown-user">
<!--					<li><a href="/park-2/html/login.html"><i class="fa fa-user fa-fw"></i>-->
<!--						管理员设置</a></li>-->
<!--					<li><a href="/park-2/html/login.html"><i class="fa fa-gear fa-fw"></i>-->
<!--						系统设置</a></li>-->
					<li class="divider"></li>
					<li><a href="/park-2/html/login.html"><i class="fa fa-sign-out fa-fw"></i>
						退出登录</a></li>
				</ul> <!-- /.dropdown-user --></li>
			<!-- /.dropdown -->
		</ul>
		<!-- /.navbar-top-links -->

		<div class="navbar-default sidebar" role="navigation">
			<div class="sidebar-nav navbar-collapse">
				<ul class="nav" id="side-menu">
					<li class="sidebar-search">
						<div class="input-group custom-search-form">

							<div class="box1">
								<input type="text" class="form-control" placeholder="查询内容..."
									   size="18px">
							</div>
							<div class="box">
								<!-- <span class="input-group-btn"> -->
								<button type="submit">
									<i class="fa fa-search" style="padding: 7px 2px 7px 2px;"></i>
								</button>
								<!--</span>  -->
							</div>

						</div> <!-- /input-group -->
					</li>
					<li><a href="Home.html" class="active"><i
							class="fa fa-edit fa-fw"></i> 返回主页</a></li>
				</ul>
			</div>
			<!-- /.sidebar-collapse -->
		</div>
		<!-- /.navbar-static-side -->
	</nav>

	<div id="page-wrapper">
		<div class="row">
			<div class="col-lg-12">
				<h1 class="page-header">管理员管理</h1>
			</div>
			<!-- /.col-lg-12 -->
		</div>
		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-default">
					<div class="panel-heading">停车场信息列表</div>
					<form id="form2">
						<!-- /.panel-heading -->
						<table class="table table-bordered table-striped" id="table1">
							<thead>
							<tr style="font-size: 18px">
								<th>车牌号码</th>
								<th>进入时间</th>
								<th>出去时间</th>
								<th>停车时间</th>
								<th>停车花费</th>

							</tr>
							</thead>

						</table>
					</form>
					<div class="aa" align="right">
						<a id="btn0"></a> <input id="pageSize" type="text" size="1"
												 maxlength="2" /><a> 条 </a> <a id="sjzl"></a> <a href="#"
																								 id="btn1">首页</a> <a href="#" id="btn2">上一页</a> <a href="#"
																																				   id="btn3">下一页</a> <a href="#" id="btn4">尾页</a> <a>转到 </a> <input
							id="changePage" type="text" size="1" maxlength="4" /> <a>页
					</a> <a href="#" id="btn5">跳转</a>

					</div>
					<!-- /.panel-body -->
				</div>
				<!-- /.panel -->
			</div>
			<!-- /.col-lg-12 -->
		</div>
	</div>
	<!-- /#page-wrapper -->

</div>


<!-- jQuery -->
<script src="../js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="../js/bootstrap.min.js"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="../js/metisMenu.min.js"></script>

<!-- DataTables JavaScript -->
<script src="../js/jquery.dataTables.min.js"></script>
<script src="../js/dataTables.bootstrap.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="../js/sb-admin-2.js"></script>


</body>

</html>